<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        .img {
            width: 300px;
            height: 300px;
        }

        .static {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color: blue;
        }

        .a {
            background: fuchsia;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 5px solid yellowgreen;
        }

        .img {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 1s;
        }

        .btn {
            width: 250px;
            height: 135px;
            border: none;
            margin: 15px;
            background: #ccc;
            border-radius: 10px;
            cursor: pointer;
            outline: none;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <button class="btn" v-shuibowen>去登录</button>
        <button class="btn" v-shuibowen="bg">去注册</button>
    </div>
</body>
<script>
    Vue.directive("shuibowen", {
        bind(el) {

        },
        inserted(el, binding) {
            el.addEventListener("click", function (e) {
                var left = el.offsetLeft;
                var top = el.offsetTop;

                var clientX = e.pageX;
                var clientY = e.pageY;

                var x = clientX - left;
                var y = clientY - top;    // 鼠标的位置

                var oSpan = document.createElement('span')
                var bg = binding.value || '#ddd';
                el.style.position = 'relative';
                el.style.overflow = 'hidden';

                oSpan.style.borderRadius = '50%';
                oSpan.style.background = bg;
                oSpan.style.position = 'absolute';
                oSpan.style.opacity = 1;

                el.append(oSpan)

                var width = 0;
                var height = 0;
                var opacity = 1;

                var timer = setInterval(() => {
                    if (opacity > 0) {
                        opacity -= 0.01;
                        width += 4;
                        height += 4;
                        oSpan.style.width = width + 'px';
                        oSpan.style.height = height + 'px';
                        oSpan.style.opacity = opacity;
                        oSpan.style.left = x - width / 2 + 'px';
                        oSpan.style.top = y - height / 2 + 'px';
                    }
                    else {
                        clearInterval(timer)
                        timer = null;
                        oSpan.remove()
                    }
                }, 10);
            })
        }
    })

    const vm = new Vue({
        // el:"#app"
        data: {  // 简单数据
            title: 'Vue 指令实现简单的水波纹效果   ',
            bg: 'orange'
        },
        mounted() {
            // 真实DOM
            document.getElementsByTagName('title')[0].innerHTML = this.title;
        },
    }).$mount("#app")

</script>

</html>